<template>

  <div>

    <data-table
      ref="pagingTable"
      :options="options"
      :list-query="listQuery"
    >

      <template #data-columns>

        <el-table-column
          label="学习日期"
          prop="day"
          align="center"
        />

        <el-table-column label="已学时长" align="center">
          <template v-slot="scope">
            <div style="display: flex; justify-content: center">
              <sec-format :value="scope.row.learnSec"/>
            </div>
          </template>
        </el-table-column>

      </template>

    </data-table>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import SecFormat from '@/components/SecFormat'

export default {
  name: 'LearnDailyPaging',
  components: { SecFormat, DataTable },
  props: {
    courseId: {
      type: String,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    },
    fileId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 10,
        params: {
          courseId: '',
          userId: '',
          fileId: ''
        }
      },

      options: {

        // 可批量操作
        multi: false,
        // 列表请求URL
        listUrl: '/api/course/file/learn/daily-paging'
      }
    }
  },
  watch: {

    // 检测查询变化
    courseId: {
      handler(val) {
        this.listQuery.params.courseId = val
        this.$refs.pagingTable.getList()
      }
    },
    fileId: {
      handler(val) {
        this.listQuery.params.fileId = val
        this.$refs.pagingTable.getList()
      }
    },
    userId: {
      handler(val) {
        this.listQuery.params.userId = val
        this.$refs.pagingTable.getList()
      }
    }
  },

  created() {
    this.listQuery.params.courseId = this.courseId
    this.listQuery.params.fileId = this.fileId
    this.listQuery.params.userId = this.userId
  },

  methods: {

  }
}
</script>
